<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/res/css/index.css">
    <link rel="stylesheet" href="/res/css/share.css">
    <link rel="stylesheet" href="/res/css/loginPop.css">
    <link rel="stylesheet" href="/res/css/msgPop.css">
</head>
<body>
<div id="search">
    <!--顶部-->
    <div class="top">
        <div class="header_cont" v-if="user === null">
            <img src="/res/img/用户.png" alt=""/>
            <a href="#" style="color: red" @click="display = true">登录</a>
        </div>
        <div class="header_cont header_mar" v-else>
            <img src="/res/img/书架.png" alt="">
            <a :href="`/bookcase.html/${user.id}`">我的书架</a>
            <a href="#" style="color: red" @click="logout">退出</a>
        </div>
    </div>

    <!--内容-->
    <div class="content">
        <div class="cont" :style="contStyle">
            <!--logo-->
            <div class="logo">
                <img src="/res/img/bigLogo.png">
            </div>
            <!--搜索框-->
            <div class="search">
                <div class="txt_box">
                    <label>
                        <input id="searchInfo" class="search_txt" type="text" v-model="searchInfo" placeholder="请输入小说明或作者"
                               @keyup.enter="page=1;search()"/>
                    </label>
                </div>
                <div class="btn_box">
                    <input class="search_btn" type="button" value="Go->" @click="page=1;search()"/>
                </div>
                <a href="#" class="clear" @click="clearInfo">清空搜索项</a>
            </div>
            <!--搜索结果-->
            <div class="info" v-show="infoStyle">
                <span v-if="total === 0">未找到您所搜索的信息,您可
                  <a :href="'https://www.baidu.com/s?ie=utf-8&rsv_dp=1&rsv_idx=1&tn=baidu&wd=' + searchInfo"
                     target="_blank">百度更多信息</a>
                </span>
                <span v-else>为您找到{{ total }}本书</span>
            </div>
            <!--书籍列表-->
            <div class="result" v-show="resultStyle">
                <div class="list">
                    <div class="list_item" v-for="book in books" :key="book.id">
                        <img :src="'/res/'+book.cover" alt="" @click="browse(book.id)">
                        <div class="banner">
                            <div class="banner_top">{{ book.title }}</div>
                            <div class="banner_bottom">{{ book.author }}</div>
                        </div>
                    </div>
                </div>
                <div class="page">
                    <!-- <div class="page"><a>首页</a></div> -->
                    <div class="last_page"><a href="#" @click="lastPage">上一页</a></div>
                    <div class="next_page"><a href="#" @click="nextPage">下一页</a></div>
                    <!-- <div class="page"><a>尾页</a></div> -->
                </div>
            </div>
        </div>
    </div>

    <!--底部-->
    <div class="bottom">
        <div class="copyright">
            <a href="#"> 版权所有©支持盗版 </a>
        </div>
    </div>


    <!--登录弹窗-->
    <div class="login_con" v-show="display">
        <div :class="popClassArr">
            <div class="exit">
                <input class="exit_btn" type="button" value="×" @click="exit"/>
            </div>
            <div class="box_con" v-if="operate === 'log'">
                <div class="input_box">
                    <img src="/res/img/user.png" alt=""/>
                    <label>
                        <input type="text" placeholder="请输入账号" v-model="input.uname"/>
                    </label>
                </div>
                <div class="input_box box_mar">
                    <img src="/res/img/密码.png" alt=""/>
                    <label>
                        <input type="password" placeholder="请输入密码" v-model="input.pwd"/>
                    </label>
                </div>
            </div>
            <div class="box_con" v-else-if="operate === 'reg'">
                <div class="input_box">
                    <img src="/res/img/user.png" alt=""/>
                    <label>
                        <input type="text" placeholder="请输入账号" class="reg_input" v-model="input.uname"
                               @blur="checkUname"/>
                    </label>
                    <img :src="regCheck[0].src" class="check_img" v-show="isShow[0]" alt=""/>
                </div>
                <div class="input_box box_mar">
                    <img src="/res/img/密码.png" alt=""/>
                    <label>
                        <input type="password" placeholder="请输入密码" class="reg_input" v-model="input.pwd"
                               @blur="checkPwd"/>
                    </label>
                    <img :src="regCheck[1].src" class="check_img" v-show="isShow[1]" alt=""/>
                </div>
                <div class="input_box box_mar">
                    <img src="/res/img/确认密码.png" alt=""/>
                    <label>
                        <input type="password" placeholder="再次输入密码" class="reg_input" v-model="input.dbPwd"
                               @blur="checkDbPwd"/>
                    </label>
                    <img :src="regCheck[2].src" class="check_img" v-show="isShow[2]" alt=""/>
                </div>
            </div>
            <div class="box_bottom">
                <input type="button" value="登录" :class="logBtnClassArr" @click="goLog(input.uname, input.pwd)"/>
                <input type="button" value="注册" :class="regBtnClassArr" @click="goReg(input.uname, input.pwd)"/>
            </div>
        </div>
    </div>

    <!--提示弹窗-->
    <div class="alert" v-show="msg !== ''">
        <div class="alert_con">
            <div class="alert_title">{{ msg }}</div>
        </div>
    </div>

</div>
<script src="/res/js/vue.js"></script>
<script src="/res/js/axios.min.js"></script>
<script>
    new Vue({
        el: "#search",
        data: {
            msg: "",
            // localhost: "[[${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #httpServletRequest.getServerPort()}]]",

            //搜索
            searchInfo: '',
            page: 1,
            total: 0,
            books: [{id: "", title: "", author: "", cover: ""}],
            contStyle: "",
            maxPage: "",
            infoStyle: false,
            resultStyle: false,

            //登录
            user: null,
            display: false,

            //登录弹窗
            popClassArr: ['login_box'],
            operate: 'log',
            regCheck: {},
            logBtnClassArr: [],
            regBtnClassArr: [],
            input: {
                uname: '',
                pwd: '',
                dbPwd: '',
            },

            isShow: [false, false, false],

            //登录弹窗常量
            error: '/res/img/关闭实心.png',
            correct: '/res/img/正确实心.png'
        },
        methods: {
            alertMsg(value) {
                this.msg = value
            },

            //退出账号
            logout() {
                axios.get("/user/logout")
                this.user = null
                this.alertMsg("已退出当前帐号")
            },

            /*登录弹窗*/
            //验证用户名
            checkUname() {
                const username = /^[a-zA-Z][a-zA-Z0-9]{5,}$/
                if (!username.test(this.input.uname)) {
                    this.regCheck[0].src = this.error
                    this.regCheck[0].isChecked = false
                    this.alertMsg("账号必须以字母开头,不能少于6位")
                } else {
                    axios.get("/user/" + this.input.uname)
                        .then(resp => {
                            if (resp.data.code !== 0) {
                                this.regCheck[0].src = this.error
                                this.regCheck[0].isChecked = false
                                this.alertMsg(resp.data.message)
                            } else {
                                this.regCheck[0].src = this.correct
                                this.regCheck[0].isChecked = true
                            }
                        }).catch(err => console.log(err));
                }
                this.isShow[0] = true
            },
            //验证密码
            checkPwd() {
                const password = /^[a-zA-Z][a-zA-Z0-9]{7,}$/
                if (!password.test(this.input.pwd)) {
                    this.regCheck[1].src = this.error
                    this.regCheck[1].isChecked = false
                    this.alertMsg("密码必须以字母开头,不能少于8位")
                } else {
                    this.regCheck[1].src = this.correct
                    this.regCheck[1].isChecked = true
                    // console.log(222)
                }
                this.isShow[1] = true
            },
            //验证二次密码输入
            checkDbPwd() {
                if (this.input.pwd !== this.input.dbPwd || this.input.dbPwd === "") {
                    this.regCheck[2].src = this.error
                    this.regCheck[2].isChecked = false
                    this.alertMsg("两次输入的密码不同")
                    // this.msg = "两次输入的密码不同"
                    // console.log(111)
                } else {
                    this.regCheck[2].src = this.correct
                    this.regCheck[2].isChecked = true
                    // console.log(222)
                }
                this.isShow[2] = true
            },
            //登录
            goLog(username, password) {
                if (this.operate === 'log') {
                    if (username !== null && password !== null) {
                        axios.get("/user/login", {
                            params: {
                                username: username,
                                password: password
                            }
                        }).then(resp => {
                            if (resp.data.code === 0) {
                                this.user = resp.data.data
                                this.alertMsg('登陆成功')
                                this.exit()
                            } else {
                                this.alertMsg(resp.data.message)
                            }
                        }).catch(err => console.log(err));
                    } else {
                        this.alertMsg('账号或密码不能为空')
                    }
                } else {
                    this.operate = 'log'
                }
            },
            //注册
            goReg(username, password) {
                if (this.operate === 'reg') {
                    let b = true
                    this.regCheck.forEach(item => {
                        if (!item.isChecked) {
                            b = false
                        }
                    })
                    if (b) {
                        axios({
                                url: '/user',
                                method: 'POST',
                                params: {
                                    uname: username,
                                    pwd: password
                                }
                            }
                        ).then(resp => {
                            // alert(resp.data)
                            this.alertMsg(resp.data)
                            // this.popStyle = {}
                            this.operate = 'log'
                        }).catch(err => console.log(err));
                    }
                } else {
                    this.operate = 'reg'
                }
            },
            //关闭弹窗
            exit() {
                this.display = false
            },

            /*搜索*/
            //搜索
            search() {
                if(this.searchInfo !== '') {
                    axios.get("/books/" + this.searchInfo, {
                        params: {
                            page: this.page
                        }
                    }).then(resp => {
                        if (resp.data.code === 0) {
                            this.books = resp.data.data.books
                            this.total = resp.data.data.total
                            this.maxPage = resp.data.data.maxPage
                            this.contStyle = 'padding-top: 0'
                            this.resultStyle = true
                        } else {
                            this.books = []
                            this.total = 0
                            this.maxPage = 0
                            this.contStyle = ''
                            this.resultStyle = false
                        }
                        this.infoStyle = true
                    }).catch(err => console.log(err))
                }
            },
            //清空搜索框
            clearInfo() {
                this.searchInfo = ""
                this.books.splice(0)
                this.total = 0
                this.infoStyle = false
                this.contStyle = ''
                this.resultStyle = false
            },
            //上一页
            lastPage() {
                this.page--
            },
            //下一页
            nextPage() {
                this.page++
            },

            browse(value) {
                location.href = "/browse.html/" + value
            }
        },
        watch: {
            msg() {
                setTimeout(() => {
                    this.msg = ''
                }, 1000)
            },

            /*搜索*/
            page(value) {
                if (value < 1) {
                    this.alertMsg("没有上一页啦")
                    this.page = 1;
                }
                if (value > this.maxPage) {
                    this.alertMsg("没有下一页啦")
                    this.page = this.maxPage
                }
                this.search()
            },

            /*登录弹窗*/
            operate: {
                immediate: true,
                handler(value) {
                    if (value !== '') {
                        switch (value) {
                            case 'reg':
                                this.input.dbPwd = ''
                                this.isShow[0] = false
                                this.isShow[1] = false
                                this.isShow[2] = false
                                this.regCheck = [
                                    {
                                        src: this.error,
                                        isChecked: false
                                    },
                                    {
                                        src: this.error,
                                        isChecked: false
                                    },
                                    {
                                        src: this.error,
                                        isChecked: false
                                    }
                                ]
                                this.popClassArr = ['login_box', 'reg_box']
                                this.logBtnClassArr = ['box_btn']
                                this.regBtnClassArr = ['box_btn right_btn', 'btn_clr']
                                break
                            default:
                                this.operate = 'log'
                                this.popClassArr = ['login_box']
                                this.logBtnClassArr = ['box_btn', 'btn_clr']
                                this.regBtnClassArr = ['box_btn right_btn']
                        }
                        this.input.uname = ''
                        this.input.pwd = ''
                    } else {
                        this.exit()
                    }
                }
            }
        },
        created() {

        },
        mounted() {
            //自动登录
            axios.get("/user").then(resp => {
                if (resp.data.code === 0) {
                    this.user = resp.data.data
                } else {
                    this.user = null
                }
            }).catch(err => console.log(err));
        },
    })
</script>
</body>
</html>